<template>
  <div>
    <el-container>
      <el-main>
        <div>
          <el-form :inline="true" size="small" :model="searchForm" class="demo-form-inline" @keyup.enter.native="search"
                   @submit.native.prevent>
            <el-form-item>
              <el-button type="primary" size="small" v-if="permissions.indexOf('logModule_sysLogModule_add') > -1"
                         icon="el-icon-plus" @click="sysLogModuleOpenCreateDialog">添加
              </el-button>
            </el-form-item>
            <el-form-item>
              <el-input placeholder="请输入模板编码类型" v-model="sysLogModulePageData.query.type"/>
            </el-form-item>
            <el-form-item>
              <el-button icon="el-icon-search" type="primary" size="small" @click="sysLogModuleQuery">查询
              </el-button>
              <el-button class="margin-left-10" icon="el-icon-delete" size="small" @click="sysLogModuleReset">清空
              </el-button>
            </el-form-item>
          </el-form>
        </div>
        <el-table border show-header stripe size="mini" :data="sysLogModulePageData.pageInfo.records"
                  @selection-change="sysLogModuleSelectionChange"
                  highlight-current-row ref="sysLogModuleTable">
          <el-table-column align="center" prop="type" label="类型" show-overflow-tooltip/>
          <el-table-column align="center" prop="productName" label="产品名称" show-overflow-tooltip/>
          <el-table-column align="center" prop="operateModule" width="100px" label="操作模块" show-overflow-tooltip/>
          <el-table-column align="center" prop="operateType" label="操作类型" show-overflow-tooltip/>
          <el-table-column align="center" prop="description" label="描述" show-overflow-tooltip/>
          <el-table-column align="center" prop="behaviourType" width="100px" label="行为类别" show-overflow-tooltip/>
          <el-table-column align="center" prop="logLevel" width="100px" label="风险级别" show-overflow-tooltip/>
          <el-table-column align="center" prop="createTime" label="创建时间" show-overflow-tooltip/>
          <el-table-column label="操作" width="140px" align="center">
            <template slot-scope="scope">
              <el-button type="text" size="small" v-if="permissions.indexOf('logModule_sysLogModule_edit') > -1"
                         icon="el-icon-edit" @click="sysLogModuleOpenUpdateDialog(scope.row)">修改
              </el-button>
              <el-button type="text" size="small" v-if="permissions.indexOf('logModule_sysLogModule_del') > -1"
                         icon="el-icon-delete" @click="sysLogModuleDeleteRecord(scope.row)">删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-row type="flex" justify="end">
          <el-pagination class="pageBar"
                         :style="{float: 'right', padding: '20px'}"
                         background
                         @size-change="sysLogModuleSizeChange"
                         @current-change="sysLogModuleCurrentChange"
                         :current-page="sysLogModulePageData.pageInfo.pageNum"
                         :page-sizes="[10, 50, 100, 500]"
                         :page-size="sysLogModulePageData.pageInfo.pageSize"
                         layout="total, sizes, prev, pager, next, jumper"
                         :total="sysLogModulePageData.pageInfo.total">
          </el-pagination>
        </el-row>
      </el-main>
    </el-container>
    <el-dialog :title="sysLogModuleDialogData.sysLogModuleTitle"
               :visible.sync="sysLogModuleDialogData.visible" width="790px"
               :close-on-click-modal="false" customClass="dialog-form"
               :close-on-press-escape="false"
               append-to-body="true">
      <el-container>
        <el-main>
          <el-form ref="sysLogModuleForm" :inline="true" :model="sysLogModuleDialogData.sysLogModuleFormData"
                   :rules="rules"
                   label-width="120px">
            <el-form-item label="编码类型" ref="type" prop="type">
              <el-input placeholder="请输入字段类型" v-model="sysLogModuleDialogData.sysLogModuleFormData.type"/>
            </el-form-item>
            <el-form-item label="产品名称" ref="productName" prop="productName">
              <el-select v-model="sysLogModuleDialogData.sysLogModuleFormData.productName" clearable
                         placeholder="请选择产品名称">
                <el-option
                    v-for="item in productName"
                    :key="item.name"
                    :label="item.name"
                    :value="item.name">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="操作模块" ref="operateModule" prop="operateModule">
              <el-select v-model="sysLogModuleDialogData.sysLogModuleFormData.operateModule" clearable
                         placeholder="请选择操作模块">
                <el-option
                    v-for="item in operateModule"
                    :key="item.name"
                    :label="item.name"
                    :value="item.name">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="操作类型" ref="operateType" prop="operateType">
              <el-select v-model="sysLogModuleDialogData.sysLogModuleFormData.operateType" clearable
                         placeholder="请选择操作类型">
                <el-option
                    v-for="item in operateType"
                    :key="item.name"
                    :label="item.name"
                    :value="item.name">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="行为类别" ref="behaviourType" prop="behaviourType">
              <el-select v-model="sysLogModuleDialogData.sysLogModuleFormData.behaviourType" clearable
                         placeholder="请选择行为类别">
                <el-option
                    v-for="item in behaviourType"
                    :key="item.name"
                    :label="item.name"
                    :value="item.name">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="风险级别" ref="logLevel" prop="logLevel">
              <el-select v-model="sysLogModuleDialogData.sysLogModuleFormData.logLevel" clearable
                         placeholder="请选择日志风险级别">
                <el-option
                    v-for="item in logLevel"
                    :key="item.name"
                    :label="item.name"
                    :value="item.name">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="描述" ref="description" prop="description" class="form-textarea-count">
              <el-input placeholder="请输入描述" type="textarea" maxlength="20" show-word-limit
                        v-model="sysLogModuleDialogData.sysLogModuleFormData.description"/>
            </el-form-item>
          </el-form>
        </el-main>
      </el-container>

      <div slot="footer" class="dialog-footer">
        <el-button icon="el-icon-circle-plus-outline" size="small" @click="sysLogModuleSaveOrUpdate" type="primary">确
          定
        </el-button>
        <el-button icon="el-icon-circle-close" size="small" @click="sysLogModuleDialogData.visible = false">取 消
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import sysLogModuleApi from "./api/sysLogModule.service"

export default {
  components: {},
  data() {
    return {
      rules: {
        type: [
          {
            required: true,
            message: '字段类型不能为空！', trigger: "blur"
          },
        ],
        productName: [
          {
            required: true,
            message: '产品名称不能为空！', trigger: "blur"
          },
        ],
        operateModule: [
          {
            required: true,
            message: '操作模块不能为空！', trigger: "blur"
          },
        ],
        operateType: [
          {
            required: true,
            message: '操作类型不能为空！', trigger: "blur"
          },
        ],
        description: [
          {
            required: true,
            message: '描述不能为空！', trigger: "blur"
          },
        ],
        behaviourType: [
          {
            required: true,
            message: '行为类别不能为空！', trigger: "blur"
          },
        ],
        logLevel: [
          {
            required: true,
            message: '日志风险级别不能为空！', trigger: "blur"
          },
        ],
      },
      sysLogModuleSelectIds: [],
      sysLogModuleDialogData: {
        visible: false,
        sysLogModuleTitle: "",
        sysLogModuleFormData: {
          type: "",
          productName: "",
          operateModule: "",
          operateType: "",
          description: "",
          behaviourType: "",
          logLevel: "",
        },
      },
      sysLogModulePageData: {
        query: {
          type: ""
        },
        pageInfo: {}
      },
      productName: [],
      operateModule: [],
      operateType: [],
      behaviourType: [],
      logLevel: [],
      permissions: JSON.parse(sessionStorage.getItem('permissions')),
    };
  },
  created() {
    this.sysLogModuleQuery();
    this.getOperateModule();
  },
  methods: {
    /**
     * 备注查询
     * @author gengtingting
     * @date 2020-06-12 13:43:30
     */
    sysLogModuleQuery() {
      let _this = this;
      sysLogModuleApi.getSysLogModulePage(
        Object.assign({
          current: this.sysLogModulePageData.pageInfo.current,
          size: this.sysLogModulePageData.pageInfo.pageSize
        }, this.sysLogModulePageData.query)
      ).then((res) => {
        _this.sysLogModulePageData.pageInfo = res.data;
      })
    },
    getOperateModule() {
      let _this = this;
      sysLogModuleApi.getLogModuleType({}).then((res) => {
        let logList = res.data;
        logList.forEach(function (log) {
          if (log.type === "dict_product") {
            _this.productName = log.dictItemVOList;
          } else if (log.type === "dict_operate_module") {
            _this.operateModule = log.dictItemVOList;
          } else if (log.type === "dict_operate_type") {
            _this.operateType = log.dictItemVOList;
          } else if (log.type === "dict_behaviour_type") {
            _this.behaviourType = log.dictItemVOList;
          } else if (log.type === "dict_level") {
            _this.logLevel = log.dictItemVOList;
          }
        })
        //_this.operateModule = res.data;
      })
    },
    /**
     * 备注查询重置
     * @author gengtingting
     * @date 2020-06-12 13:43:30
     */
    sysLogModuleReset() {
      this.sysLogModulePageData.query.type = "";
      this.sysLogModulePageData.query.productName = "";
      this.sysLogModulePageData.query.roleId = "";
      this.sysLogModulePageData.query.behaviourType = "";
      this.sysLogModulePageData.query.logLevel = ""
      this.sysLogModulePageData.query.operateModule = ""
      this.sysLogModulePageData.query.operateType = ""
      this.sysLogModuleQuery();
    },

    /**
     * 备注页码变化
     * @author gengtingting
     * @date 2020-06-12 13:43:30
     */
    sysLogModuleSizeChange(val) {
      this.sysLogModulePageData.pageInfo.size = val;
      this.sysLogModuleQuery();
    },

    /**
     * 备注当前页
     * @author gengtingting
     * @date 2020-06-12 13:43:30
     */
    sysLogModuleCurrentChange(val) {
      this.sysLogModulePageData.pageInfo.current = val;
      this.sysLogModuleQuery();
    },

    /**
     * 备注列表选中事件
     * @author gengtingting
     * @date 2020-06-12 13:43:30
     */
    sysLogModuleSelectionChange(selection) {
      this.sysLogModuleSelectIds = [];
      selection.forEach((item, index) => {
        this.sysLogModuleSelectIds.push(item.id);
      });
    },

    /**
     * 备注添加
     * @author gengtingting
     * @date 2020-06-12 13:43:30
     */
    sysLogModuleOpenCreateDialog() {
      this.sysLogModuleDialogData.sysLogModuleTitle = "添加";
      this.sysLogModuleDialogData.visible = true;
      this.sysLogModuleDialogData.sysLogModuleFormData = {};
    },

    /**
     * 备注修改
     * @author gengtingting
     * @date 2020-06-12 13:43:30
     */
    sysLogModuleOpenUpdateDialog(row) {
      this.sysLogModuleDialogData.sysLogModuleTitle = "修改";
      this.sysLogModuleDialogData.visible = true;
      let _this = this;
      sysLogModuleApi.getSysLogModuleById(row.id).then((res) => {
        _this.sysLogModuleDialogData.sysLogModuleFormData = res.data;
      });
    },

    /**
     * 备注保存
     * @author gengtingting
     * @date 2020-06-12 13:43:30
     */
    sysLogModuleSaveOrUpdate() {
      let _this = this;
      this.$refs["sysLogModuleForm"].validate(valid => {
        if (valid) {
          if (this.sysLogModuleDialogData.sysLogModuleFormData.id != null) {
            sysLogModuleApi.updateSysLogModuleById(this.sysLogModuleDialogData.sysLogModuleFormData).then((res) => {
              if (res.data) {
                this.$message.success("修改成功！");
                _this.sysLogModuleDialogData.visible = false;
                _this.sysLogModuleQuery();
              } else {
                this.$message.error("修改失败！");
              }
            });
          } else {
            sysLogModuleApi.saveSysLogModule(this.sysLogModuleDialogData.sysLogModuleFormData).then((res) => {
              if (res.data) {
                this.$message.success("添加成功！");
                _this.sysLogModuleDialogData.visible = false;
                _this.sysLogModuleQuery();
              } else {
                this.$message.error("添加失败！");
              }
            });
          }
        }
      });
    },

    /**
     * 备注删除
     * @author gengtingting
     * @date 2020-06-12 13:43:30
     */
    sysLogModuleDeleteRecords() {
      if (this.sysLogModuleSelectIds.length <= 0) {
        this.$alert('请先选择一条要删除的记录！', '提示', {
          confirmButtonText: '确定',
          callback: action => {
          }
        });
        return;
      }

      this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        sysLogModuleApi.deleteSysLogModule(this.sysLogModuleSelectIds).then((res) => {
          if (res.data > 0) {
            this.$message({
              type: 'success',
              message: '备注删除成功!'
            });
            this.sysLogModuleQuery();
          } else {
            this.$message({
              type: 'error',
              message: '备注删除失败!'
            });
          }

        });
      });
    },
    /**
     * 备注删除
     * @author gengtingting
     * @date 2020-06-12 13:43:30
     */
    sysLogModuleDeleteRecord(data) {
      this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        sysLogModuleApi.deleteSysLogModule(data.id).then((res) => {
          if (res.data > 0) {
            this.$message({
              type: 'success',
              message: '备注删除成功!'
            });
            this.sysLogModuleQuery();
          } else {
            this.$message({
              type: 'error',
              message: '备注删除失败!'
            });
          }

        });
      });
    },
  }
};
</script>

<style scoped>
</style>
